<template>
  <moyu-card>
    <template #title>
      <span>数据源列表</span>
    </template>
    <template #option>
      <slot name="header"/>
    </template>
    <template #content>
      <moyu-table v-model="dataList" @select-row="getDetail">
        <el-table-column prop="name" label="名称" fixed min-width="90"/>
        <el-table-column prop="access" label="连接方式" min-width="120"/>
        <el-table-column prop="type" label="类型" min-width="90"/>
        <el-table-column prop="host" label="主机" min-width="90"/>
        <el-table-column prop="db" label="数据库" min-width="120"/>
        <el-table-column prop="user" label="账号" min-width="100"/>
        <el-table-column prop="createTime" label="创建时间" min-width="170"/>
      </moyu-table>

      <div class="moyu-pagination">
        <moyu-pagination v-model="queryParams" @select-page="getListPage"/>
      </div>
    </template>
  </moyu-card>
</template>

<script setup>
import {ref, onMounted, unref, reactive} from "vue";
import MoyuCard from "@/components/MoyuCard/MoyuCard.vue";
import MoyuPagination from "@/components/MoyuPagination/MoyuPagination.vue";
import MoyuTable from "@/components/MoyuTable/MoyuTable.vue";

const props = defineProps(["getList"])
const emit = defineEmits(["rowClick"])

let dataList = ref([])

const queryParams = ref({
  size: 20,
  current: 0,
  total: 0,
  name: '',
})

const getListPage = function () {
  props.getList(queryParams.value).then((value) => {
    console.log(value)
    queryParams.value.size = value.data.size
    queryParams.value.current = value.data.current
    queryParams.value.total = value.data.total
    dataList.value = value.data.records
  })
}

defineExpose({getListPage})

onMounted(() => {
  getListPage()
})

// 点击行触发的事件
const getDetail = function (row, column, cell, event) {
  emit("rowClick", JSON.parse(JSON.stringify(row)))
}
</script>

<style scoped>

</style>